<template >
  <div class="register">

    <div v-show="$store.state.isShowDefault" class="defaultShow">

      <div class="cont">
        <device-retrieval :category="category" :statuses="statuses">
          <h3>设备登记</h3>
        </device-retrieval>
        <device-opera :pathname="pathname" :statuses="statuses">
          <div class="opera-header">
            <p class="add-device" @click="addDevice"><i class="el-icon-circle-plus-outline"></i><span>登记新设备</span></p>
            <p class="device-status"><span>未审核<i class="green line"></i></span><span>已审核<i class="blue line"></i></span>
            </p>
          </div>
        </device-opera>
      </div>
      <div class="cover" v-show="isShowAdd"></div>
      <div class="showAdd" v-show="isShowAdd">
        <i class="el-icon-close close" @click="hideAdd"></i>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="设备名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="设备分类" prop="category">
            <el-select v-model="ruleForm.category" placeholder="全部分类">
              <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="设备数量" prop="number">
            <el-input v-model="ruleForm.number"></el-input>
          </el-form-item>

          <el-form-item label="设备单价" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>

          <el-form-item label="采购时间" prop="date">
            <el-input type="date" v-model="ruleForm.date"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-show="!$store.state.isShowDefault">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import DeviceRetrieval from './registerComponents/DeviceRetrieval.vue'
import DeviceOpera from './registerComponents/DeviceOpera.vue'
import DeviceDetail from './registerComponents/DeviceDetail.vue'
import DeviceEdit from './registerComponents/DeviceEdit.vue'
export default {
  name: "MainRegister",
  data() {
    return {
      isShowAdd: false,
      category: [],
      pathname: "/pre-list",
      statuses: [
        {
          value: "STATUS1",
          label: "未审核",
          color: "green"
        },
        {
          value: "STATUS2",
          label: "已审核",
          color: "blue"
        }
      ],
      ruleForm: {
        name: '',
        category: '',
        price: '',
        number: '',
        date: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择设备分类', trigger: 'change' }
        ],

        date: [
          { required: true, message: '请选择日期 YY--MM--DD', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入设备单价', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入设备数量', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    DeviceRetrieval,
    DeviceOpera,
    DeviceDetail,
    DeviceEdit
  },
  methods: {
    submitForm(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/pre-add",
            data: {
              name: this.ruleForm.name,
              price: this.ruleForm.price,
              number: this.ruleForm.number,
              category: this.ruleForm.category,
              time: this.ruleForm.date,
            }
          }).then(res => {
            if (res.data.code == 0) {
              _this.$message({
                message: '添加成功',
                type: 'success'
              });
              _this.isShowAdd = false
              this.$router.go(0)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addDevice() {
      this.isShowAdd = true
    },
    hideAdd() {
      this.isShowAdd = false
    },

  },
  created() {
    this.$axios({
      method: "get",
      url: '/category-list'
    }).then(res => {
      this.category = res.data.data
    })
  }

}
</script>

<style lang="less">
.register {
  padding: 25px 10px;
  background-color: #fff;

  .cont {
    display: flex;
    justify-content: space-between;
  }

  .line {
    display: inline-block !important;
    width: 6px;
    height: 10px;
  }

  .opera {
    flex: 1;
    padding: 0 10px;

    .el-button+.el-button,
    .el-checkbox.is-bordered+.el-checkbox.is-bordered {
      margin-left: 0;
    }
  }

  .opera-header {
    display: flex;
    justify-content: space-between;

    .add-device {
      color: blue;
      font-size: 20px;

      i {
        margin-right: 6px;
      }
    }

    .device-status {
      span {
        margin: 0 5px;

        i {
          color: #fff;
          margin-left: 4px;
          background-color: blue;
        }
      }
    }
  }

  .green {

    background-color: green !important;
  }

  .blue {

    background-color: blue !important;
  }

  .showAdd {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 460px;
    padding: 20px 0;
    box-sizing: border-box;
    background-color: #fff;
    transform: translate(-50%, -50%);

    .el-input {
      width: 70%;
    }

    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
  }
}
</style>